<!--
 * @Author: your name
 * @Date: 2021-12-09 11:57:45
 * @LastEditTime: 2021-12-25 17:50:05
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \geek-admin-test\src\components\Todolist.vue
-->

<template>


  <div>
     <span class="dustbin">🗑</span>
    <input type="text" v-model="title" @keydown.enter="addTodo" />
    <button v-if="active < all" @click="clear">清理</button>
    <ul v-if="todos.length">
       <transition-group name="flip-list" tag="ul">
             <li v-for="(todo,i) in todos" :key="todo.title">
          <input type="checkbox" v-model="todo.done" />
          <span :class="{ done: todo.done }">{{ todo.title }}</span>
          <span class="remove-btn" @click="removeTodo($event, i)">❌</span>
        </li>
       </transition-group>
     
    </ul>
    <span v-else>暂无数据</span>
    <div>
      全选 <input type="checkbox" v-model="allDone" />
      <span>{{active}} / {{all}}</span>
    </div>
  </div>
  <transition name="modal">
<div class="info-wrapper" v-if="showModal">   
   <div class="info"> 哥，你啥也没输入!</div>  
   </div>
</transition>
   <div class="animate-wrap">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="animate" v-show="animate.show">📋</div>
    </transition>
  </div>
</template>

<script setup>
import { computed, ref,getCurrentInstance } from "vue";
import {useTodos} from '../utils/useTodos';
//  const { ctx } = getCurrentInstance();
//  console.log(ctx);

let {animate,beforeEnter,enter,afterEnter,showModal, title, todos, addTodo, clear,removeTodo, active, all, allDone } = useTodos();

</script>
<style scoped>
.info-wrapper {  position: fixed;  top: 20px;  width:200px;}
.info {  padding: 20px;  color: white;  background: #d88986;}
.modal-enter-from {    opacity: 0;    transform: translateY(-500px);  }  
.modal-enter-active {    transition: all 0.3s ease;  }  
.modal-leave-to {    opacity: 0;    transform: translateY(-500px);  } 
 .modal-leave-active {    transition: all 0.3s ease;  }
 .flip-list-move {  transition: transform 0.8s ease;}
 .flip-list-enter-active,.flip-list-leave-active {  transition: all 1s ease;}
 .flip-list-enter-from,.flip-list-leave-to {  opacity: 0;  transform: translateX(30px);}
 .dustbin {
  font-size: 20px;
  position: fixed;
  right: 10px;
  top: 10px;
}
.animate-wrap .animate {
  position: fixed;
  right: 10px;
  top: 11px;
  z-index: 100;
  transition: all 0.5s linear;
}
</style>